<template>
  <section>
    <ProductNav :title="`分类 / ${category}`"></ProductNav>
    <section class="category-container">
      <section class="category-wrapper">
        <FeedCard :key="product.pro_no" v-for="product in products.value" :info="product"></FeedCard>
      </section>
    </section>
  </section>
</template>
<script setup lang="ts">
import ProductNav from '../components/product/ProductNav.vue';
import { useRoute } from 'vue-router';
import { reactive, effect, computed } from '@vue/reactivity';
import { getCategories, getProducts } from '../api/productApi';
import FeedCard from '../components/product/FeedCard.vue';
const route = useRoute();
const products = reactive({
  value: [],
});
effect(() => {
  getProducts({
    cid: route.params.cid,
    limit: 50,
  }).then(res => {
    products.value = res.data;
  });
});

const category = computed(() => getCategories()[route.params.cid as any].label);
</script>
<style scoped>
.category-container {
  background-color: #f3f3f3;
  padding: 20px 0 40px;
  min-height: 100%;
}
.category-wrapper {
  width: 1226px;
  min-width: 1226px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 14px;
}
</style>